<template>
  <section class="site-content">
    <!-- 轮播-->
    <carousel :logos="logosInfo"></carousel><!-- 轮播-->
    <!-- 公告-->
    <div class="announcement">
      <marquee scrollAmount=2 onmouseover=stop() onmouseout=start()>
        <div class="announcement-item">
          <i class="fa fa-bullhorn margin-right-normal"></i>
          视频与文章内容精彩不断
        </div>
      </marquee>
    </div><!-- 公告-->
    <div class="web-content clearfix" style="margin-top: 5px;">
      <!-- 分类面板+用户登录面板-->
      <div class="grid_3">
        <!-- 分类面板-->
        <category-menu></category-menu><!-- 分类面板-->
        <!-- 用户登录面板-->
        <div class="user-login" @mouseover="loginVeriCodeShow" @mouseout="loginVeriCodeHide">
          <div style="text-align: center; color: white">{{login.tipMessage}}</div>
          <div class="account-info clearfix">
            <div class="grid_1 alpha text">用户名</div>
            <div class="alpha grid_2 omega">
              <input type="text" v-model="login.userAccount"/>
            </div>
          </div>
          <div class="password-info clearfix">
            <div class="grid_1 alpha text">密码</div>
            <div class="alpha grid_2 omega">
              <input type="password" v-model="login.userPassword"/>
            </div>
          </div>
          <div v-if="needVeriCode">
            <div class="password-info clearfix">
              <div class="grid_1 alpha text">验证码</div>
              <div class="alpha grid_2 omega">
                <input type="password" v-model="login.veriCode"/>
              </div>
            </div>
            <div class="veriCode flex flex-v flex-align-center" v-html="currentCode"></div>
          </div>
          <div class="operation clearfix">
            <ul>
              <li><a @click="userLogin" class="login-btn">登录</a></li>
              <li><a @click="beginRegister" class="sign-in">注册</a></li>
            </ul>
          </div>
        </div><!-- 用户登录面板-->
      </div><!-- 分类面板+用户登录面板-->
      <!-- 封推视频面板-->
      <div class="grid_9 recommend-priority">
        <panel-list :listDatas="recommendBook" reverse='true' hLineWidth="723px" vLineHeight="235px" hLineRight="-10px"
                    hLineTop="-30px" panelTitle="推荐专题" @itemclick="subjectClickHandler">
          <div slot-scope="{item}">
            <div class="flex flex-h flex-justify-space-between">
              <a class="article-item-title">{{item.title}}</a>
              <a  class="article-item-title"><i class="fa fa-book"></i> {{item.articleNum}}</a>
            </div>
          </div>
        </panel-list>
      </div><!-- 封推视频面板-->
      <!-- 今日免费-->
      <div class="grid_9 recommend-priority">
        <panel-list :listDatas="recommendVedio" reverse="false" hLineWidth="700px" vLineHeight="225px" hLineLeft="-15px"
                    hLineTop="-30px" panelTitle="推荐视频" @itemclick="videoClickHandler">
          <div slot-scope="{item}">
            <div class="flex flex-h flex-justify-space-between">
              <div>
                <p class="vedio-item-title">{{item.subjectName}}</p>
                <p class="vedio-item-content">{{item.subjectDesc}}</p>
              </div>
              <div class="vedio-item-category">
                {{item.subjectType}}
              </div>
            </div>
          </div>
        </panel-list>
      </div><!-- 今日免费-->
    </div>
    <!-- 具体视频内容-->
    <div class="grid_12">
      <panel-list-hung :titlePic="newVedio.hungPanelTitle" hungPanelWidth="940px" :listDatas=newVedio
                       @itemclick="videoClickHandler" panelBgWidth="200px" panelBgHeight="130px">
        <div slot-scope="{item}">
          <div class="flex flex-h flex-justify-space-between">
            <div>
              <p class="vedio-item-title" style="margin-bottom: 5px">{{item.subjectName}}</p>
              <p class="vedio-item-content">{{item.subjectDesc}}</p>
            </div>
            <div class="vedio-item-category">
              {{item.subjectType}}
            </div>
          </div>
        </div>
      </panel-list-hung>
    </div><!-- 具体视频内容-->
    <!-- 具体视频内容-->
    <div class="grid_12">
      <panel-list-hung :titlePic="newBook.hungPanelTitle"  hungPanelWidth="940px" :listDatas=newBook
                       @itemclick="subjectClickHandler" panelBgWidth="200px" panelBgHeight="130px">
        <div slot-scope="{item}">
          <div class="flex flex-h flex-justify-space-between">
            <a class="article-item-title">{{item.title}}</a>
            <a  class="article-item-title"><i class="fa fa-book"></i> {{item.articleNum}}</a>
          </div>
        </div>
      </panel-list-hung>
    </div><!-- 具体视频内容-->
    <register-panel :begin-register="register.showRegisterPanel" @close="closeRegister"></register-panel>
  </section>
</template>

<script>
import axios from '../../node_modules/axios/dist/axios'
import CategoryMenu from './common/CategoryMenu'
export default {
  data () {
    return {
      logosInfo: [{
        title: '视频',
        desc: '爱学习爱生活,分享与收获',
        image: require('../assets/images/星空.png'),
        src: '/vediolist',
        moduleNum: 1
      },
      {
        title: '文章',
        desc: '用心记录点点滴滴',
        image: require('./common/assets/articleBg.jpg'),
        src: '/article',
        moduleNum: 2
      }],
      recommendBook: {
        imageSrc: require('../../static/images/背景长图.png'),
        width: '700',
        datas: []
      },
      recommendVedio: {
        imageSrc: require('../../static/images/星空背景长图.png'),
        width: '700',
        datas: []
      },
      newVedio: {
        imageSrc: require('../../static/images/星空背景长图.png'),
        hungPanelTitle: require('../../static/images/最新专辑.png'),
        width: '700',
        datas: []
      },
      newBook: {
        imageSrc: require('../../static/images/背景长图.png'),
        hungPanelTitle: require('../../static/images/最新专题.png'),
        width: '700',
        datas: []
      },
      register: {
        showRegisterPanel: false
      },
      login: {
        userAccount: '',
        userPassword: '',
        veriCode: '',
        tipMessage: '',
        needVeriCode: false,
        veriCodeShow: false
      }
    }
  },
  components: {
    CategoryMenu,
    'Carousel': (resolve) => { require(['./common/Carousel'], resolve) },
    'CardPanel': (resolve) => { require(['./common/CardPanel'], resolve) },
    'panelList': () => import('./common/PanelList'),
    'panelListHung': () => import('./common/PanelListHung'),
    'categorymenu': () => import('./common/CategoryMenu'),
    'registerPanel': () => import('./RegisterPanel')
  },
  mounted () {
    this.loadResenctSubject()
    this.obtainNew()
  },
  computed: {
    currentCode () {
      if (this.$store.state.needVeriCode) {
        return this.$store.state.veriCode
      }
    },
    needVeriCode () {
      return this.$store.state.needVeriCode && this.login.veriCodeShow
    }
  },
  methods: {
    beginRegister () {
      this.register.showRegisterPanel = true
      this.$store.dispatch('obtainVeriCodeAsyn', {operator: 'register'})
    },
    loginVeriCodeShow () {
      this.login.veriCodeShow = true
    },
    loginVeriCodeHide () {
      this.login.veriCodeShow = false
    },
    userLogin () {
      let _this = this
      axios.post('/login/userLogin', {
        userAccount: this.login.userAccount,
        password: this.login.userPassword,
        veriCode: this.login.veriCode
      }).then(function (res) {
        if (res.data.status !== 200) {
          _this.login.tipMessage = res.data.message
          _this.login.userAccount = ''
          _this.login.password = ''
          _this.login.veriCode = ''
          if (res.data.datas.needVeriCode) {
            _this.$store.dispatch('obtainVeriCodeAsyn')
          }
          return
        }
        _this.login.userAccount = ''
        _this.login.userPassword = ''
        _this.login.veriCode = ''
        _this.login.tipMessage = ''
        // 登录成功清空vuex的登录状态
        _this.$store.commit('clearVeriCode')
        let DateUtil = require('../util/DateUtil')
        let greet = DateUtil.timePeriod(new Date())
        _this.$store.commit('setUserName', `${greet} ${res.data.datas.userName}`)
      })
    },
    closeRegister () {
      this.register.showRegisterPanel = false
    },
    obtainNew () {
      var _this = this
      axios.get('/vedioList/getVedio', {params: {categoryType: '全部', filterType: '最新'}})
        .then(function (res) {
          _this.recommendVedio.datas = _this._.chunk(res.data.datas, 3)[0]
          _this.newVedio.datas = _this._.chunk(res.data.datas, 4)[0]
        })
    },
    loadResenctSubject () {
      let _this = this
      axios.get('/article/resentSubject').then(function (res) {
        if (res.data.status === 200) {
          _this.recommendBook.datas = _this._.chunk(res.data.datas, 3)[0]
          _this.newBook.datas = _this._.chunk(res.data.datas, 4)[0]
        }
      })
    },
    subjectClickHandler (item) {
      this.$router.push({path: '/allArticle', query: {nodeId: item.nodeId, searchTitle: item.title}})
      this.$store.commit('selectNav', 2)
    },
    videoClickHandler (item) {
      this.$router.push({path: '/vediodetail', query: {subjectName: item.subjectName, subjectType: item.subjectType}})
      this.$store.commit('selectNav', 1)
    },
    obtainVedioList (categoryType, filterType) {
      var _this = this
      axios
        .get('/vedioList/getVedio', {
          params: {categoryType: '全部', filterType: '全部'}
        })
        .then(function (res) {
          _this.recommendVedio.datas = res.data.datas
        })
    }
  }
}
</script>

<style scoped>
@import '../assets/css/content.css';
.site-content {
  position: relative;
}
.article-item-title {
  font-size: 16px;
  margin-top: 10px;
  text-align: left;
  color: darkgrey;
}
.vedio-item-title {
  font-size: 16px;
  margin-top: 10px;
  text-align: left;
  color: darkgrey;
}
.vedio-item-content {
  font-size: 14px;
  color: darkgrey;
}
  .vedio-item-category {
    padding-top: 10px;
    color: orange;
  }
  .operation {
    font-size: 14px;
  }
  .veriCode{
    background: white;
  }
</style>
